<template>
    <view>
        <!-- pages/bigWheel/bigWheel.wxml -->
        <!-- modal弹出框 -->
        <modal title="恭喜您" v-if="!hiddenModal" confirm-text="确定" :no-cancel="true" @confirm="listenerConfirm">{{ detail }}</modal>
        <!-- modal弹出框 -->
        <view class="currentScore">
            <image src="https://bfb.iirr5.com/program/game/xin.png" class="xin"></image>
            <text id="currentScore">{{ score }}</text>
        </view>
        <view>
            <!-- 顶部背景 -->
            <image src="https://bfb.iirr5.com/program/game/bg01.jpg" class="topbg" mode="aspectFill"></image>
            <!-- 转盘 -->
            <view class="zhuanpan">
                <image src="https://bfb.iirr5.com/program/game/ly-plate-c.gif" class="bg"></image>
                <view class="innerbgs" :animation="animationData">
                    <image src="https://bfb.iirr5.com/program/game/bg-lottery.png" class="innerbg"></image>
                    <view :class="'zhuanpan-dx zhuanpan-dx-' + index" v-for="(item, index) in prize.prize" :key="index">
                        <image :src="item.original_img" class="zhuanpan-dx-img"></image>
                    </view>
                </view>
                <image src="https://bfb.iirr5.com/program/game/playbtn.png" class="btn" :data-type="prize.id" @tap="isclickFun"></image>
            </view>
            <view class="shuoming">游戏说明：每转盘一次使用15积分</view>
            <!-- 中奖名单 -->
            <view class="winnerList">
                <view class="title">中奖名单</view>
                <view class="ourterheight">
                    <view class="ulList" :style="'position:absolute;top:' + topval + 'rpx'">
                        <block v-if="item.state == 1" v-for="(item, index) in prize.lists" :key="index">
                            <view class="each">
                                <text class="each-1">{{ item.phone ? item.phone : '暂未公开手机号' }}</text>
                                <text class="each-2">{{ item.prize_name }}</text>
                                <text class="each-3">{{ item.create_time }}</text>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/bigWheel/bigWheel.js
var timer;
var n = 1; //旋转圈数
var whichdegs = ''; //中奖项
var luck = []; //定义奖项
//var degs = [60, 120, 180, 240, 300, 360];// 定义旋转度数
var degs = [360, 300, 240, 180, 120, 60]; // 定义旋转度数
let app = getApp();
export default {
    data() {
        return {
            animationData: {},

            //动画
            isclick: 'start',

            //按钮事件  默认开始事件
            hiddenModal: true,

            //弹框是否隐藏
            detail: '恭喜您获得',

            //弹框内容
            topval: 0,

            score: '',

            prize: {
                prize: [],
                id: '',
                lists: []
            },

            datas: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.scroll();
        this.getPrize();
        var s = uni.getStorageSync('score');
        this.setData({
            score: s
        });
    },
    /**isclick
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getPrize: function () {
            let that = this;
            app.globalData._get(
                'turntable/turntable',
                {
                    type: 1
                },
                function (result) {
                    luck = result.data.prize.prize;
                    that.setData({
                        prize: result.data.prize
                    });
                }
            );
        },

        start: function (e) {
            var that = this;
            n = 1;

            //开始事件以后置为停止事件（改为自动停止）
            app.globalData._get(
                'turntable/luckDraw',
                {
                    id: e.currentTarget.dataset.type
                },
                function (result) {
                    if (result.code) {
                        that.setData({
                            datas: result.msg,
                            isclick: ''
                        });

                        //重置动画
                        // _this.reset.call(_this);

                        timer = setInterval(function () {
                            //开始旋转
                            star.call(that);
                            //
                            n++;
                        }, 300);
                        //启动动画
                        function star() {
                            //开始旋转动画
                            var animation = uni.createAnimation({
                                transformOrigin: '50% 50%',
                                duration: 300,
                                timingFunction: 'linear'
                            });
                            animation.rotate(360 * n).step();
                            this.setData({
                                animationData: animation.export()
                            });
                        }

                        //多久以后自动停止
                        setTimeout(that.stop, 3000);
                    }
                }
            );
        },

        stop: function (e) {
            var that = this;
            clearInterval(timer);
            timer = null;
            //结束动画
            //动画越来越慢直到停止
            sto.call(that);
            function sto() {
                //算概率
                that.detail += that.datas.data.prize_name;
                var gailv = that.datas.data.rand;
                if (gailv < that.datas.data.array[0]) {
                    console.log(1);
                    whichdegs = degs[0];
                } else if (that.datas.data.array[0] < gailv && gailv < that.datas.data.array[1]) {
                    console.log(2);
                    whichdegs = degs[1];
                } else if (that.datas.data.array[1] < gailv && gailv < that.datas.data.array[2]) {
                    console.log(3);
                    whichdegs = degs[2];
                } else if (that.datas.data.array[2] < gailv && gailv < that.datas.data.array[3]) {
                    console.log(4);
                    whichdegs = degs[3];
                } else if (that.datas.data.array[3] < gailv && gailv < that.datas.data.array[4]) {
                    console.log(5);
                    whichdegs = degs[4];
                } else if (that.datas.data.array[4] < gailv && gailv <= that.datas.data.array[5]) {
                    console.log(6);
                    whichdegs = degs[5];
                }
                var animation = uni.createAnimation({
                    transformOrigin: '50% 50%',
                    duration: 1200 + whichdegs * 1.4,
                    timingFunction: 'ease-out'
                });
                animation.rotate(n * 360 + whichdegs).step(); //d转到哪个盘
                this.setData({
                    animationData: animation.export()
                });
            }
            //显示弹出框
            timer = setTimeout(function () {
                that.setData({
                    hiddenModal: false,
                    detail: that.detail
                });
            }, 1200 + whichdegs * 1.4);
        },

        listenerConfirm: function (e) {
            var that = this;
            this.setData({
                hiddenModal: true,
                isclick: 'start',
                detail: '恭喜您获得',
                isclick: 'start'
            });
            that.reset();
        },

        //重置动画
        reset: function () {
            //重置动画 度数重置为0
            var animation = uni.createAnimation({
                transformOrigin: '50% 50%',
                duration: 0,
                timingFunction: 'linear'
            });
            animation.rotate(0).step();
            this.setData({
                animationData: animation.export()
            });
        },

        scroll: function () {
            var that = this;
            setInterval(function () {
                if (that.topval == -384) {
                    that.topval = 0;
                } else {
                    that.topval -= 1;
                }
                that.setData({
                    topval: that.topval
                });
            }, 30);
        },

        isclickFun() {
            console.log('占位：函数 isclick 未声明');
        }
    }
};
</script>
<style>
@import './wheel.css';
</style>
